<template>
  <div class="mian">
    <div class="content">
      <h3 class="title">外卖平台管理系统</h3>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item prop="uname">
          <el-input
            type="text"
            v-model="ruleForm.uname"
            prefix-icon="iconfont icon-yonghu"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            :type="flag ? 'password' : 'text'"
            v-model="ruleForm.pass"
            prefix-icon="iconfont icon-mima"
            autocomplete="off"
          >
            <i
              @click="flag = !flag"
              slot="suffix"
              class="iconfont"
              :class="flag ? 'icon-eyes' : 'icon-eyes-'"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validateUname = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }

    return {
      flag: true,
      ruleForm: {
        unmae: '',
        pass: ''
      },
      rules: {
        uname: [{ validator: validateUname, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.mian {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 5px;
}
.content {
  width: 400px;
  height: 300px;
}
.btn {
  width: 100%;
}
</style>
